<template>
  <div>
    <div
      style="font-weight: 600; font-size: 20px; text-align: center; color: #000; margin-top: 90px; margin-bottom: 20px"
    >
      {{ $t('重置登录密码') }}
    </div>
    <div class="main">
      <a-form-model
        ref="form"
        :model="model"
        :rules="validatorRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        @keyup.enter.native="editPwd"
      >
        <a-form-model-item prop="username" :label="$t('登录账号')">
          <a-row>
            <a-col :span="16"
              ><a-input v-model="model.username" size="large" :placeholder="$t('请输入登录账号')"> </a-input
            ></a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item prop="password" :label="$t('新密码')">
          <a-row>
            <a-col :span="16" style="position: relative"
              ><a-input :type="type" v-model="model.password" size="large" :placeholder="$t('请输入新密码')"> </a-input>
              <span @click="changeType" style="position: absolute; right: 0; top: 0; bottom: 0; padding: 0 10px">
                <a-icon type="eye-invisible" v-if="type == 'password'" />
                <a-icon type="eye" v-if="type == 'text'" />
              </span>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item prop="confirmPwd" :label="$t('确认密码')">
          <a-row>
            <a-col :span="16">
              <a-input :type="type" v-model="model.confirmPwd" size="large" :placeholder="$t('请输入确认密码')">
              </a-input>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item prop="smscode" :label="$t('验证码')">
          <a-row>
            <a-col :span="16">
              <a-input v-model="model.smscode" :maxLength="6" size="large" :placeholder="$t('请输入验证码')"> </a-input>
            </a-col>
            <a-col :span="8">
              <a-button
                class="btn-send"
                style="max-width: 100%; background-color: #169bd5; color: #fff; margin-left: 4px"
                @click="sendAuthCode"
                :disabled="isTiming"
                >{{ msg }}</a-button
              >
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 16, offset: 6 }">
          <a-button type="default" style="margin-right: 30px; width: 100px" size="large" @click="goback">{{
            $t('返回')
          }}</a-button>
          <a-button type="primary" style="width: 100px" size="large" :disabled="disabled" @click="editPwd">{{
            $t('确定')
          }}</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
let timer, i
export default {
  name: 'Alteration',
  components: {},
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      model: {},
      validatorRules: {
        username: [{ required: true, message: this.$t('请输入登录账号') }],
        password: [
          {
            required: true,
            message: this.$t('请输入新密码'),
          },
        ],
        confirmPwd: [
          {
            required: true,
            message: this.$t('请输入确认密码'),
          },
          { validator: this.compareToFirstPassword },
        ],
        smscode: [{ required: true, message: this.$t('请输入验证码') }],
      },
      msg: this.$t('发送验证码'),
      isTiming: false,
      disabled: false,
      type: 'password',
    }
  },
  created() {
    this.disabled = false
    this.model.username = this.$route.params.username
    console.log(this.$route.params.username)
  },
  methods: {
    sendAuthCode() {
      let that = this,
        i = 60
      that.isTiming = true
      getAction('/guest/user/sendAuthCode', {}).then((res) => {
        if (res.success) {
          that.$info({
            title: '',
            content: res.message,
            onOk: function () {
              clearInterval(timer)
              that.msg = i + 's'
              timer = setInterval(function () {
                if (i == 0) {
                  clearInterval(timer)
                  that.msg = that.$t('发送验证码')
                  that.isTiming = false
                } else {
                  i--
                  that.msg = i + 's'
                }
              }, 1000)
            },
          })
        } else {
          that.$message.error(res.message)
        }
      })
    },
    editPwd() {
      let that = this
      clearInterval(timer)
      that.$refs.form.validate((valid) => {
        console.log(valid)
        if (valid) {
          that.disabled = true
          let query = Object.assign({}, that.model)
          getAction('/guest/user/passwordChange', query).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.goback()
            } else {
              that.$message.error(res.message)
              that.disabled = false
            }
          })
        }
      })
    },
    compareToFirstPassword(rule, value, callback) {
      if (value && value !== this.model.password) {
        callback(this.$t('两次输入的密码不一样'))
      } else {
        callback()
      }
    },
    goback() {
      this.$router.go(-1)
    },
    changeType() {
      if (this.type == 'text') {
        this.type = 'password'
      } else {
        this.type = 'text'
      }
    },
  },
}
</script>

<style lang="less" scoped>
.main {
  width: 600px;
  margin: 0 auto;
}
.ant-btn.btn-send,
.ant-btn.btn-send:active,
.ant-btn.btn-send:hover,
.ant-btn.btn-send:focus,
.ant-btn.btn-send.active,
.ant-btn.btn-send.hover,
.ant-btn.btn-send.focus {
  background-color: #169bd5;
  border-color: #169bd5;
  box-shadow: none;
}
</style>

